{include file="../app/view/common/header.html" subtitle="管理面板" page="money_type"}
<style>
    .a {
        text-decoration: none;
        color: #4351AF;
    }
    
    /* 状态一: 未被访问过的链接 */
    .a:link {
        text-decoration: none;
        color: #4351AF;
    }
    
    /* 状态二: 已经访问过的链接 */
    .a:visited {
        text-decoration: none;
        color: #4351AF;
    }
    
    /* 状态三: 鼠标划过(停留)的链接(默认红色) */
    .a:hover {
        text-decoration: none;
        color: #4351AF;
    }
    /* 状态四: 被点击的链接 */
    .a:active {
        text-decoration: none;
        color: #AAD7F4;
    }
</style>
<h1> </h1>
<div class="mdui-textfield">
    <input class="mdui-textfield-input" type="text" placeholder="新建类型" style="width: 40%;display: inline;" id="p"/>
    <input class="mdui-textfield-input" type="text" placeholder="代码名称" style="width: 40%;display: inline;" id="c"/>
    <button class="mdui-btn mdui-color-theme-accent mdui-ripple" style="left: 1%;width: 10%;" onclick="newBtn()">新建类型</button>
</div>

<h1> </h1>
<div class="mdui-table-fluid">
    <table class="mdui-table mdui-table-hoverable">
      <thead>
        <tr>
          <th>#</th>
          <th>类型</th>
          <th>代码</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="table">
        
      </tbody>
    </table>
  </div>
<script>
    table = document.getElementById("table")
    var sub = `<tr>
            <td>ID</td>
            <td>CHINESE</td>
            <td>ENGLISH</td>
            <td>CONTROL</td>
            </tr>`
</script>
<script>
    $.get("/money/api/type",function(data) {
        for (let d in data) {
            d = data[d]
            document.getElementById("table").innerHTML += sub
                                                            .replace("ID",d.id)
                                                            .replace("CHINESE",d.chinese)
                                                            .replace("ENGLISH",d.english)
        }
    })
    function newBtn() {
        $.post("/admin/new_money_type",{
            p:document.getElementById("p").value,
            c:document.getElementById("c").value
        },function(data) {
            mdui.alert(data.msg)
            window.location.reload()
        })
    }
</script>